<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";

import api from "@/api";

import { ElMessage } from "element-plus";
import { setLocalStorage } from "@/utils/common";

const route = useRouter();
const { proxy } = getCurrentInstance();

const from = reactive({
  userName: "",
  password: "",
});

const loading = ref(false);
const ruleFormRef = ref(null);
const submitForm = function (ruleFormRef) {
  if (!ruleFormRef) return;
  ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      loading.value = true;
      const res = await api.auth.login({
        ...from,
        isUnionId: false,
      });
      if (res.status === "success") {
        //浏览器缓存用户信息 有效期24小时
        setLocalStorage("userInfo", res, 1000 * 60 * 60 * 24);
        setLocalStorage("username", from.userName, 1000 * 60 * 60 * 24);
        route.push("/home");
        ElMessage({
          message: "登录成功",
          type: "success",
        });
        loading.value = false;
      } else {
        ElMessage.error(res.msg);
        loading.value = false;
      }
    }
  });
};

const rules = reactive({
  userName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
});

onMounted(() => {
  ruleFormRef.value.resetFields();
});
</script>

<template>
  <div class="container">
    <div class="logo"></div>
    <div class="loginFrom">
      <div class="desc">{{ proxy._GLOBAL.SYSTITLE }}</div>
      <div class="title">账号登录</div>
      <el-form
        label-width="0px"
        style="max-width: 460px"
        ref="ruleFormRef"
        :model="from"
        :rules="rules"
      >
        <el-form-item prop="userName">
          <i class="user"></i>
          <el-input
            placeholder="用户名"
            placeholder-class="placeholderStyle"
            v-model="from.userName"
          />
        </el-form-item>
        <el-form-item prop="password">
          <i class="pwd"></i>
          <el-input  type="password" placeholder="密码" v-model="from.password" show-password  />
        </el-form-item>

        <div class="submit" @click="submitForm(ruleFormRef)">
          <el-button type="primary" :loading="loading">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("@/assets/images/login/bg.png");
  padding: 20px;
  box-sizing: border-box;

  .logo {
    width: 120px;
    height: 40px;
    margin-left: 20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("@/assets/images/home/logo2.png");
  }

  .loginFrom {
    width: 670px;
    height: 490px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("@/assets/images/login/box.png");
    position: absolute;
    right: 40px;
    top: 200px;

    .desc {
      font-size: 45px;
      font-family: HanYiLingXinTiJian;
      letter-spacing: 6px;
      color: #6498d3;
      text-align: center;
      margin-top: -60px;
      height: 60px;
    }

    .title {
      font-family: HanYiLingXinTiJian;
      font-size: 30px;
      width: 100%;
      height: 130px;
      line-height: 150px;
      text-align: center;
      color: #4a85d8;
    }

    :deep .el-form {
      width: 90%;
      margin: auto;

      .el-form-item__content {
        margin-bottom: 20px;
      }

      .el-input {
        width: 90%;
        margin-left: 20px;
        height: 45px;

        .el-input__wrapper {
          background: unset;
          border: 1px solid rgba(73, 108, 168, 0.51);
          border-radius: 10px;
        }
      }

      i {
        float: left;
        width: 23px;
        height: 25px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .user {
        background-image: url("@/assets/images/login/user.png");
      }

      .pwd {
        background-image: url("@/assets/images/login/pwd.png");
      }

      .submit {
        width: 105%;
        height: 140px;
        line-height: 45px;
        font-weight: bold;
        margin: auto;
        margin-left: 10px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/login/btnbg.png");
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        cursor: pointer;

        button {
          background: unset;
          border: none;
          font-weight: bold;
        }

        .el-button.is-loading:before {
          background: unset;
        }
      }
    }

    ::-webkit-input-placeholder {
      /* WebKit, Blink, Edge */
      color: #adbbd7;
    }

    :-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #adbbd7;
    }

    ::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #adbbd7;
    }

    :-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #adbbd7;
    }
  }
}
</style>
